<template>
  <div class="recommend">
    <div class="recommend-warpper">
      <ScrollView>
       <div>
          <!-- 传递数据给子组件 -->
          <Banner :banners="banners"></Banner>
          <Personalized :personalized="personalized" :title="'推荐歌单'" @select="faterSelectItem" :type="'personalized'"></Personalized>
          <Personalized :personalized="albums" :title="'最新专辑'" @select="faterSelectItem" :type="'albums'"></Personalized>
          <SongList :songs="songs"></SongList>
       </div>
      </ScrollView>
    </div>
      <transition>
      <!-- 这里指定二级路由出口如歌单详情 -->
      <router-view></router-view>
      </transition>
  </div>
</template>

<script>
import {getBanner,getPersonalized,getNewAlbum,getNewsong} from '../api/index'
import Banner from '../components/Recommend/Banner'
import Personalized from '../components/Recommend/Personalized'
import SongList from '../components/Recommend/SongList'
import ScrollView from '@/components/ScrollView'
export default {
  name: 'Recommend',
  data:function(){
      return{
          banners:[],
          personalized:[],
          albums:[],
          songs:[]
      }
  },
  components:{
      Banner,
      Personalized,
      SongList,
      ScrollView
  },
  methods: {
    faterSelectItem(id,type){
      // 编程式导航设置
      this.$router.push({
        path:`/recommend/detail/${id}/${type}`
      })
    }
  },
  // 生命周期：在组件创建的时候就调用一下getBanner的请求方法
  created(){
      getBanner()
      .then((data)=>{
          // console.log(data);
        this.banners = data.banners
      })
      .catch(function(err){
          console.log(err);
      })
      getPersonalized()
      .then((data)=>{
          // console.log(data);
        this.personalized = data.result
        // 🔔使用 cc.sort(()=> Math.random() < 0.5 ? -1 : 1) 方法将数组打乱后返回
        this.personalized = (this.personalized.sort(() => Math.random() < 0.5 ? -1 : 1)).splice(0,6)
      })
      .catch(function(err){
          console.log(err);
      })
      getNewAlbum()
      .then((data)=>{
          // console.log(data);
          // 截取前面6条数据
          // 🔔使用 cc.sort(()=> Math.random() < 0.5 ? -1 : 1) 方法将数组打乱后返回
          this.albums = (data.albums.sort(() => Math.random() < 0.5? -1 : 1)).splice(0,6)
      })
      .catch(function(err){
          console.log(err);
      })
      getNewsong()
      .then((data)=>{
        // console.log(data);
        // this.songs = data.result
        // console.log(data.result);
        // 将数据提取有用的信息出来传递给子组件
        let list = []
        for(let i = 0; i<data.result.length;i++){
          let obj = {}
          obj.id = data.result[i].id
          obj.picUrl = data.result[i].song.album.picUrl
          obj.singer = data.result[i].name
          obj.name =  data.result[i].song.album.artists[0].name
          list.push(obj)
        }
        // console.log(list);
        this.songs = list
      })
      .catch(function(err){
        console.log(err);
      })
  }
}
</script>

<style scoped lang="scss">
// 父盒子和IScroll容器的高度要比内容低
.recommend{
  position: fixed;
  top: 184px;
  left: 0;
  right: 0;
  bottom: 0;
  // overflow: hidden;
  .recommend-warpper{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
.v-enter {
  transform: translateX(100%);
}
.v-enter-to {
  transform: translateX(0);
}
.v-enter-active {
  transition: transform 1s;
}
.v-leave {
  transform: translateX(0);
}
.v-leave-to {
  transform: translateX(100%);
}
.v-leave-active {
  transition: transform 1s;
}
</style>
